<template>
    <div>
        <!-- 播放区域 -->
        <div class="play-wrap">
            <div class="wrap flex">
                <div class="play-con">
                    <div class="ty-play">
                        <my-video></my-video>
                    </div>
                </div>
                <div class="rec-side">
                    <div class="play-title">
                        <!-- 标题区域 -->
                        <h3 class="tl">
                            <router-link to="{name:'play'}">{{data.name}}</router-link>
                            <span>{{new Date(data.created_at).getFullYear()}}</span>
                        </h3>
                    </div>
                    <!-- 播放列表 -->
                    <div class="play-list flex">
                    <router-link to="#">1</router-link>
                    <!-- <router-link to="name:home " class="act">2</router-link>
                    <router-link to="name:home">3</router-link>
                    <router-link to="name:home">4</router-link>
                    <router-link to="name:home">5</router-link>
                    <router-link to="name:home">6</router-link> -->
                    </div>

                    <div class="scroll-area">
                        <!-- 滚动列表区域 -->
                    </div>
                </div>
            </div>
            <!-- 视频信息 -->
            <div class="play-info wrap tl">
                <h1>
                    {{data.name}}
                </h1>
                <p class="sub-des flex">
                    <span>{{data.commendInfo}} </span>
                    <span class="pre-span tag">{{data.tags[0].name}}</span>
                    <span class="pre-span tag">{{data.sixList[0]}}</span>
                    <span class="pre-span tag">{{data.hallmarks[0]}}</span>
                </p>
            </div>
        </div>
        <!-- 播放底部信息 -->
        <div class="play-bottom tl ">
           <div class="wrap">
                <div class="bot-top">
                    <ul>
                        <li>简介</li>
                    </ul>
                </div>
                <div class="des">
    {{data.des}}
                </div>
                <!-- 为你推荐 -->
                <div class="recommend">
                    <h2>为你推荐</h2>
                </div>
           </div>
        </div>
    </div>
</template>
<style lang="scss">
.play-wrap {
  margin-top: 70px;
  color: #d0d0d6;
  background: #303036;
  .wrap {
    align-items: flex-start;
  }
  .play-con {
    width: 860px;
    // 播放视窗
    .ty-play {
      width: 866px;
      height: 488px;
      background: #ccc;
    }
  }
  .rec-side {
    margin-left: 0;
    padding-left: 20px;
    padding-top: 20px;
    align-items: flex-start;
    background: #202026;
    height: 488px;
    //   侧边区域
    .play-title {
      h3 {
        a {
          font-size: 24px;
          color: #d0d0d6;
        }
        span {
          margin-left: 10px;
          color: #f30;
          font-weight: 700;
          font-size: 18px;
        }
      }
    }
    // 播放列表
    .play-list {
        margin-top:15px;
        flex-wrap:wrap;
        font-size:18px;
        justify-content: flex-start;
        a {
            margin-bottom:10px;
            display:block;
            width:54px;
            height:54px;
            line-height:54px;
        }
        .act {
            border-radius: 50%;
            color:#2692ff;
            background: #101016;
        }
    }
  }
  //播放信息
  .play-info {
      padding:30px 0;
      h1 {
          margin-bottom:12px;
          font-size:26px;
          color:#dadcde;
      }
      .sub-des {
          justify-content: flex-start;
          .pre-span {
              margin-left:10px;
          }
          span {
              margin-left:5px;
          }
          .tag {
            display:block;
            margin-left: 10px;
            padding: 0 7px;
            height: 26px;
            color: #dadcde;
            line-height: 26px;
            background: #202026;
            border-radius: 100px;
          }
      }
  }

}
// 播放底部
.play-bottom {
    overflow: hidden;
    padding:40px 0;
    background: #fff;
    .bot-top {
        li {
            font-size: 26px;
            height: 26px;
            line-height: 26px;
            color: #333;
            font-weight: 400;
        }
    }
    .des {
        padding-top:10px;
    }
}
// 为你推荐
.recommend {
    h2 {
    margin-bottom: 20px;
    margin-top:20px;
    color: #333;
    font-size: 26px;
    line-height: 26px;
    }
}
</style>
<script>
import myVideo from '../components/video'
export default {
  data() {
      return {
          data:''
      }
  },
  components:{
      myVideo
  },
  created() {
      this.data=JSON.parse(this.$route.query.data)
  }
};
</script>

